<head>
		<!--<%= javascript_include_tag "analysis/select_view" %> -->
    <%= stylesheet_link_tag 'analysis/select_view' %>

    <style type="text/css">
    	/*
    $sub-menus :  5;
    .radmenu {
      position: absolute;
      display:flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      
      > a {
        top: calc(50% - 60px);
        left: calc(50% - 60px);
        list-style:none;
        &.show {
         display: flex !important; 
        }
      }
      li {
       -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
       transition: all 1s ease; 
       list-style:none;
      }
      a {
      list-style:none;
        position: absolute;
        width: 120px;
        height: 120px;
        background: rgba(white, 0.9);
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 120px;
        display: none;
        text-decoration: none;
        color: #34495e;
        transition: all 1s ease;
        box-shadow: 0 0 15px #34495e;
        font-weight: 200;
        font-size: 16px;
      }
      .selected {
        background: rgba(#34495e, 0.9);
        display: flex;
        top: calc(50% - 60px);
        left: calc(50% - 60px);
        color: #f1c40f;
        box-shadow: 0 0 10px #ecf0f1;
        + ul {
          @for $i from 1 through $sub-menus {
            > li:nth-child(#{$i}) {
              $angle: 360deg / $sub-menus * $i;
              -webkit-transform: rotate($angle) translateX(100px);
              transform: rotate($angle) translateX(100px);
              > a {
                -webkit-transform: rotate(0 - $angle);
                transform: rotate(0 - $angle);
              }
            }
          }
          > li > a {
            display: flex
          }
        }
      }
      
    }*/
    </style>
</head>


<div>
	<div style="padding-top:10px;"></div>

			<div class="col-lg-6 col-md-6 col-xs-6" >
			<div class="page-header">
			  <h4>Your Projects</h4>
			</div>
			<div id="container">
			  <div class="list-view-p">
			    <ul>

			    	<% @projects.each do |p| %>
			    	<li>
			    	 <div id="<%=p.project_id%>" class ="p_class"> 
			    	     <span class="avatar"><i class="icon-book icon-2x"></i></span>
			    	     <span class="name" id="pn_<%= p.project_id %>"><%= p.project_name %></span>
			    	 </div> 
			    	</li>
			    	<% end %>
			    </ul>
			  </div>
			</div>

				

			

		</div>

		
		<div class="col-lg-6 col-md-6 col-xs-6">
			<div class="page-header">
			  <h4 id="people_title">Related People</h4>
			</div>
			<div id="container">
			  <div class="list-view">
			    <ul>
			    	<% @p_hash.each_with_index do |(project_id,members),p_index|%>
			    	  <% members.each_with_index do |m,index| %>
			    	   <% if p_index == 0%>
			   		   		
			   		   		    <%if m.role == "owner"%>
			   		   		    <li class="project_<%=project_id%> member <%=project_id%>_m<%=index%>" num="<%=members.length%>">
			   			   	   		<span class="king"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	 </li>
			   			   	   <%else%>
			   			   	   <%end%>
			   			   	     
			   			   	

			   		   <% else %>
			   		   	
			   		   			<%if m.role == "owner"%>
			   		   				<li class="project_<%=project_id%> member <%=project_id%>_m<%=index%>" num="<%=members.length%>" style="display:none">
			   			   	   		<span class="king"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	</li>
			   			   	   <%else%>
			   			   	   <%end%>

			   		   <% end  %>

			   		
			   		  <% end %>

			   		  <% members.each_with_index do |m,index| %>
			   		  	   <% if p_index == 0%>
			   		   		
			   		   		    <%if m.role == "member"%>
			   		   		    <li class="project_<%=project_id%> member <%=project_id%>_m<%=index%>" num="<%=members.length%>">
			   			   	   		<span class="avatar"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	</li>
			   			   	   <%else%>
			   			   	   <%end%>
			   			   	     


			   		   <% else %>
			   		   	
			   		   			<%if m.role == "member"%>
			   		   				<li class="project_<%=project_id%> member <%=project_id%>_m<%=index%>" num="<%=members.length%>" style="display:none">
			   			   	   		<span class="avatar"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	</li>
			   			   	   <%else%>
			   			   	   <%end%>

			   		   <% end  %>

			   		
			   		  <% end %>

			    	<% end %>

			    </ul>
			  </div>
			  <!-- <div class="details-view">
			    <div class="back icon-angle-left"></div>
			    <a class="goin icon-search pull-right" href="/analysis/people" data-toggle="tooltip" data-placement="left" title="More.."></a>

			    


			    <div class="background"></div>
			    <ul style="margin-top:-70px;">
			    	<li><i class="icon icon-facetime-video"></i>Chat</li>
			    	<li><i class="icon icon-envelope"></i>blah@gmail.com</li>
			    	<li><i class="icon icon-tablet"></i>(593)273-2847</li>
			    	<li><i class="icon icon-home"></i>(328)723-1794</li>
			    </ul>
			  </div> -->
			</div>
		</div>

		<script type="text/javascript">

			// var buttons = document.querySelectorAll(".radmenu a");
			
			// for (var i=0, l=buttons.length; i<l; i++) {
			//   var button = buttons[i];
			//   button.onclick = setSelected;
			// }
					$('.goin').tooltip();

					var container = $('#container');
					//get the active class ,get the personal info,use ajax to refresh the details-view div(person info)....hope to be correct  
					$(document).on('click', '.list-view li', function(){
					  // $(this).addClass('active');
					  // container.addClass('details');
					  location.href="/analysis/people";
					});

					$('.back').click(function(){
					  container.removeClass('details');
					  $('.list-view li').removeClass('active');
					});

					// $(document).on('click', '.list-view-p li', function(){
					//   location.href="/analysis/project"
					// });
				$(document).ready(function(){
					$('.p_class').hover(function(){
						var project_id=$(this).attr('id')
						var class_name=".project_"+project_id;

						var pn_id='#pn_'+project_id;
						var project_name=$(pn_id).html();

						$('#people_title').html(project_name);

						$('.member').css("display","none");
						var n=$(class_name).attr('num');
						// alert(n);
						for (var i=0;i<n;i++){
							var m_class='.'+project_id+"_m"+i.toString();
							// alert(m_class);
							
							$(m_class).css("display","block");
							var offset= "translate3d(0,"+(i*70).toString()+"px,0)";
							// alert(offset);
							$(m_class).css("transform", offset);
						}
						// alert($(this).attr('id'));
					});
				});

			</script>


	

	</div>
</div>

<!-- 
<h3 style="margin-left:-100px;">Please Select</h3>
				<br/><br/><br/><br/>
				<a onclick="BackToTop()">Back</a>
				<div class="radmenu"><a href="#" class="show" >Select People</a>
				  <ul>
				    <li>
				      <a href="/analysis/people">Ray</a>
				      <ul> 
				        <li><a href="/analysis/project">Harvest 1</a></li>
				        <li><a href="/analysis/project">Harvest 2</a></li>
				        <li><a href="/analysis/project">Harvest 3</a></li>
				        <li><a href="/analysis/project">Harvest 4</a></li>
				        <li><a href="/analysis/project">Harvest 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Kami</a>
				      <ul>
				        <li><a href="#">Project 1</a></li>
				        <li><a href="#">Project 2</a></li>
				        <li><a href="#">Project 3</a></li>
				        <li><a href="#">Project 4</a></li>
				        <li><a href="#">Project 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Viki</a>
				      <ul>
				        <li><a href="#">Sub Menu 1</a></li>
				        <li><a href="#">Sub Menu 2</a></li>
				        <li><a href="#">Sub Menu 3</a></li>
				        <li><a href="#">Sub Menu 4</a></li>
				        <li><a href="#">Sub Menu 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Eric</a>
				      <ul>
				        <li><a href="#">Sub Menu 1</a></li>
				        <li><a href="#">Sub Menu 2</a></li>
				        <li><a href="#">Sub Menu 3</a></li>
				        <li><a href="#">Sub Menu 4</a></li>
				        <li><a href="#">Sub Menu 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Herbert</a>
				      <ul>
				        <li><a href="#">Sub Menu 1</a></li>
				        <li><a href="#">Sub Menu 2</a></li>
				        <li><a href="#">Sub Menu 3</a></li>
				        <li><a href="#">Sub Menu 4</a></li>
				        <li><a href="#">Sub Menu 5</a></li>
				      </ul>
				    </li>
				  </ul>
				</div> -->

